<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <!-- Existing company fields -->
      <el-form-item label="企业名称：" prop="companyName" required>
        <el-input v-model="form.companyName" :disabled="role !== 3"></el-input>
      </el-form-item>

      <!-- New position-specific fields -->
      <el-form-item label="职位标题：" prop="title" required>
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="招聘人数：" prop="count" required>
        <el-input-number v-model="form.count" :min="1" :max="100"></el-input-number>
      </el-form-item>

      <el-form-item label="职位状态：" prop="status" required>
        <el-select v-model="form.status" placeholder="选择职位状态">
          <el-option :value="1" label="招聘中"></el-option>
          <el-option :value="2" label="暂停招聘"></el-option>
          <el-option :value="0" label="已结束"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="薪资范围：" prop="wages" required>
        <el-input v-model="form.wages" placeholder="请输入薪资范围，例：8k-15k"></el-input>
      </el-form-item>

      <el-form-item label="职位描述：" prop="description" required>
        <el-input type="textarea" v-model="form.description" :rows="4"></el-input>
      </el-form-item>

      <el-form-item label="职位要求：" prop="requirements" required>
        <el-input type="textarea" v-model="form.requirements" :rows="4"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import positionApi from '@/api/position'
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      form: {
        companyId: '',
        title: '',
        count: 1,
        status: 1,
        wages: '',
        currentQuantity: 0,
        description: '',
        requirements: '',
        companyName: ''
      },
      role: '',
      formLoading: false,
      rules: {
        companyName: [
          { required: true, message: '请填写企业名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请填写职位标题', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请填写招聘人数', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择职位状态', trigger: 'change' }
        ],
        wages: [
          { required: true, message: '请填写薪资范围', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写职位描述', trigger: 'blur' }
        ],
        requirements: [
          { required: true, message: '请填写职位要求', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.formLoading = true
    // Ensure userInfo is loaded
    this.initUserInfo().then(() => {
      if (this.userInfo) {
        this.form.companyId = this.userInfo.companyId
        this.form.companyName = this.userInfo.companyName
        this.role = this.userInfo.role
      }
      // Check if we're editing an existing position
      let id = this.$route.query.id
      if (id) {
        positionApi.select(id).then(re => {
          this.form = re.data.response
          this.formLoading = false
        }).catch(() => {
          this.formLoading = false
        })
      } else {
        this.formLoading = false
      }
    })
  },
  methods: {
    ...mapActions('user', ['initUserInfo']),
    ...mapActions('tagsView', ['delCurrentView']),
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          positionApi.edit(this.form).then(re => {
            if (re.data.code === 1) {
              this.$message.success(re.data.message)
              this.delCurrentView(this).then(() => {
                this.$router.push('/company/job/postings')
              })
            } else {
              this.$message.error(re.data.message)
              this.formLoading = false
            }
          }).catch(e => {
            this.formLoading = false
          })
        }
      })
    },
    resetForm () {
      let lastId = this.form.id
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        companyId: '',
        title: '',
        count: 1,
        status: 1,
        wages: '',
        currentQuantity: 0,
        description: '',
        requirements: '',
        companyName: ''
      }
      this.form.id = lastId
    }
  }
}
</script>
